import React from 'react';
import { Text, View } from 'react-native';

const FlexBasis = () => {
    return (
        // 默认是column垂直排列
        // <View style={{ flex: 1 ,flexDirection:'row'}}>
        //     <View style={{ flex: 1, backgroundColor: 'red' }}></View>
        //     <View style={{ flex: 2, backgroundColor: 'yellow' }}></View>
        //     <View style={{ flex: 3, backgroundColor: 'pink' }}></View>
        // </View>

        <View style={{
            flex: 1,
            flexDirection: 'column',
            justifyContent: 'space-between',
            alignItems: 'baseline',//针对所有子元素  alignSelf:针对子元素自身
            alignContent: 'stretch',
            flexWrap: 'nowrap',
            flexBasis: ''
        }}>
            <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }}></View>
            <View style={{ width: 50, height: 50, backgroundColor: 'skyblue', alignSelf: 'center' }}></View>
            <View style={{ width: 50, height: 100, backgroundColor: 'powderblue' }}></View>
        </View>
    )
}

export default FlexBasis